<template>
  <bpm-c-blocktext v-if="pinputtype === 'text'"
                   :preadonly="preadonly"
                   :ptitle="ptitle"
                   v-model="realValue"
                   :validateExp="validateExp"
                   @valueChanged="valueChanged"
                   :pline="pline" />
  <bpm-c-blockurl v-else-if="pinputtype === 'url'"
                  :preadonly="preadonly"
                  :ptitle="ptitle"
                  :validateExp="validateExp"
                  v-model="realValue"
                  :pline="pline" />
  <bpm-c-blockimageurl v-else-if="pinputtype === 'imageurl'"
                       :preadonly="preadonly"
                       :ptitle="ptitle"
                       :validateExp="validateExp"
                       v-model="realValue"
                       :pline="pline" />
  <bpm-c-blocknumber v-else-if="pinputtype === 'number'"
                     :preadonly="preadonly"
                     :ptitle="ptitle"
                     :validateExp="validateExp"
                     v-model="realValue"
                     @valueChanged="valueChanged"
                     :pline="pline" />
  <bpm-c-blockdate v-else-if="pinputtype === 'date'"
                   :preadonly="preadonly"
                   :ptitle="ptitle"
                   :validateExp="validateExp"
                   v-model="realValue"
                   @valueChanged="valueChanged"
                   :pline="pline" />
  <bpm-c-blocktextarea v-else-if="pinputtype === 'textarea'"
                       :preadonly="preadonly"
                       :ptitle="ptitle"
                       :validateExp="validateExp"
                       v-model="realValue"
                       @valueChanged="valueChanged"
                       :pline="pline" />
  <bpm-c-blockbutton v-else-if="pinputtype === 'button'"
                     :preadonly="preadonly"
                     :ptitle="ptitle"
                     :validateExp="validateExp"
                     v-model="realValue"
                     @buttonClick="buttonClick"
                     :pline="pline" />
  <bpm-c-blockselect v-else-if="isSelect(pinputtype)"
                     :preadonly="preadonly"
                     :ptitle="ptitle"
                     :pselectType="pinputtype"
                     :validateExp="validateExp"
                     v-model="realValue"
                     :showValue="showValue"
                     @valueChanged="valueChanged"
                     @sltvalueChanged="sltvalueChanged"
                     :pline="pline" />
  <bpm-c-blockadvance v-else-if="isAdvance(pinputtype)"
                      :preadonly="preadonly"
                      :ptitle="ptitle"
                      :pselectType="pinputtype"
                      :validateExp="validateExp"
                      v-model="realValue"
                      @valueChanged="valueChanged"
                      @sltvalueChanged="sltvalueChanged"
                      :pline="pline" />
</template>

<script>
export default {
  name: 'bpmCBlock',
  model: {
    prop: 'pcontent',
    event: 'changed'
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    // 只读/可编辑,
    preadonly: {
      type: Boolean,
      default: false
    },
    // 输入类型可选文本/链接/数字/日期/下拉/高级选择,仅可编辑状态有效
    // text,url,number,date,select,advanceselect
    pinputtype: {
      type: String,
      default: 'text'
    },
    // 可能占一整行或行的一半
    pline: {
      type: Number,
      default: 2
    },
    ptitle: {
      type: String,
      default: ' '
    },
    pcontent: {
      type: [String, Number],
      default: ''
    },
    validateExp: {
      type: Object,
      default () {
        return {}
      }
    },
    showValue: ''
  },
  data () {
    return {
      realValue: this.pcontent
    }
  },
  watch: {
    pcontent (to) {
      this.realValue = to
    }
  },
  methods: {
    buttonClick () {
      this.$emit('buttonClick')// ,{item})
    },
    valueChanged (aValue) {
      console.log('c block valueChanged', aValue)
      this.realValue = aValue
      this.$emit('changed', this.realValue)
      this.$emit('valueChanged', aValue)
    },
    // 透传
    sltvalueChanged (aValue) {
      console.log('c block sltvalueChanged', aValue)
      setTimeout(() => {
        this.$emit('sltvalueChanged', aValue)
      }, 100)
    },
    isAdvance (pinputtype) {
      return this.isBlockAdvance(pinputtype)
    },
    isSelect (pinputtype) {
      return this.isBlockSelect(pinputtype)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
